<template>
<div class="dashboard-container" >
    <div class="app-container">
      <el-card shadow="never">

        <!-- 搜索区域 -->
        <el-row type="flex" justify="space-between" align="middle">
          <el-col>
            <el-form :model="page" @submit.native.prevent>
              <el-form-item>
                <span class="title">关键字</span>
                <el-input v-model="page.keyword"  @keyup.enter.native="search" placeholder="根据编号搜索"  style="width:239px; height:28px;"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
              <el-col>
                <el-row type="flex" justify="end">
                <el-button size="mini" @click="btnCancel">清除</el-button>
                <el-button size="mini" type="primary" @click="search" >搜索</el-button>
                </el-row>
              </el-col>
        </el-row>

        <!-- 提示区域 -->
        <div class="tips">
          <i class="el-icon-info"></i>
          <p class="alert">数据一共 {{ page.counts }} 条</p>
        </div>

        <!-- 内容区域 -->
        <el-table :data="lists" v-loading="loading"  lock :body="true" :fullscreen="true" element-loading-text="拼命加载中....">
          <el-table-column width="220" label="编号" prop="id"/>
          <el-table-column width="80" label="题型" prop="questionType" :formatter="formatRandoms" />
          <el-table-column width="220" label="题目编号" prop="questionIDs">
            <template v-slot="{ row }">
              <div v-for="item in row.questionIDs" :key="item.number">
                <el-link type="primary" @click="preview(item.id)" :underline="false" >{{ item.number }}</el-link>
              </div>
            </template>
          </el-table-column>
          <el-table-column width="180" label="录入时间" prop="addTime"/>
          <el-table-column width="167" label="答题时间(S)" prop="totalSeconds"/>
          <el-table-column width="165" label="正确率(%)" prop="accuracyRate"/>
          <el-table-column width="165" label="录入人" prop="userName"/>
          <el-table-column width="80"   label="操作">
            <template v-slot="{ row }">
              <el-button type="danger" size="mini" icon="el-icon-delete" circle plain @click="removeRandoms(row)"></el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页区域 -->
        <el-row style="height: 80px"  type="flex" justify="end" align="middle">
        <el-pagination
            small
            @size-change="handleSizeChange"
            :total="page.counts"
            :current-page="page.page"
            :page-size="page.pagesize"
            :page-sizes="[10, 20, 30, 50]"
            background
            layout="prev,pager,next,sizes,jumper"
            @current-change="changePage"
          />
        </el-row>
      </el-card>
    </div>
    <!-- 封装组件 预览 -->
    <preview :dialogVisible="dialogVisible" @Cancel="dialogVisibles" :questionItem="questionItem"></preview>
  </div>
</template>

<script>
import { randoms, removeRandoms, detail } from '@/api/hmmm/questions'
import { questionType } from '@/api/hmmm/constants'
import preview from './companys/preview.vue'
export default {
  components: {
    preview
  },
  data () {
    return {
      questionType,
      // 分页
      page: {
        page: 1,
        pagesize: 10,
        counts: 0,
        keyword: ''
      },
      // 组题列表
      lists: [],
      // 基础题库列表
      questionItem: {},
      // 遮罩加载
      loading: false,
      dialogVisible: false

    }
  },
  created () {
    this.randoms()
  },
  methods: {
    dialogVisibles (f) {
      this.dialogVisible = f
    },
    // 搜索
    async search () {
      this.loading = true
      this.page.page = 1

      await this.randoms(this.page)

      this.page.keyword = ''
      await new Promise(resolve => setTimeout(() => resolve(), 300))
      this.loading = false
    },
    // 清除
    btnCancel () {
      this.page.keyword = ''
      this.page.page = 1
      this.randoms()
    },

    // 获取组题列表
    async randoms () {
      const { data: { items, counts } } = await randoms(this.page)
      this.lists = items
      this.page.counts = counts
    },
    // 切换页码
    async changePage (e) {
      this.page.page = e
      await this.randoms()
    },
    // 每页条数
    async handleSizeChange (val) {
      this.page.pagesize = val
      await this.randoms()
    },
    // 删除
    async removeRandoms (data) {
      try {
        await this.$confirm('此操作将永久删除该题组, 是否继续?', '提示', { type: 'warning' })
        await removeRandoms(data)
        this.randoms()
        this.$message.success('删除该题组成功')
      } catch (error) {
        console.log(error)
      }
    },
    // 筛选出组题类型
    formatRandoms (row, column, cellValue, index) {
      const obj = this.questionType.find(item => (item.value + '') === (cellValue + ''))
      return obj ? obj.label : '未知'
    },
    // 组题预览
    async preview (id) {
      try {
        const { data } = await detail({ id })
        this.questionItem = data
        this.dialogVisible = true
      } catch (error) {
        console.log(error)
      }
    }

  }
}
</script>

<style scoped>
.title{
  color: #606266;
  padding: 0 10px 0 25px ;
  text-align: right;
  font-size: 14px;
  font-weight: 700;
}
.el-icon-info{
  padding-right: 6px;
}
.tips{
  margin-bottom: 15px;
  color: #909399;
  width: 100%;
    padding:0 16px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 4px;
    background-color: #f4f4f5;
}
.alert{
  display: inline-block;
}
span{
  display: inline-block;
  padding: 20px 90px 10px 10px;
}
.blue{
  display: inline-block;
  color: blue;
}
</style>
